<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Address Range Detail</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        nav.clean {
            background: none;
            box-shadow: none;
        }

        .breadcrumb:before {
            color: rgba(0, 0, 0, 0.7);
        }

        .breadcrumb, .breadcrumb:last-child {
            color: rgba(0, 0, 0, 1);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="section">
      <div class="row">
        <div class="col m5 s8">
          <div class="row">
            <div class="col m4 s4">
              <b><span id="start-label"></span></b>
            </div>
            <div class="col m8 s8">
              <span id="range-start"></span>
            </div>
          </div>
          <div class="row">
            <div class="col m4 s4">
              <b><span id="end-label"></span></b>
            </div>
            <div class="col m8 s8">
              <span id="range-end"></span>
            </div>
          </div>
          <div class="row">
            <div class="col m4 s4">
              <b><span id="netmask-label"></span></b>
            </div>
            <div class="col m8 s8">
              <span id="range-netmask"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
          <div class="col m2">
              <a class="waves-effect waves-light blue-grey lighten-2 btn" onclick="window.history.back()" id="back-caption"><i
                      class="material-icons left">chevron_left</i></a>
          </div>
      </div>
      <div class="row">
        <div class="col m6 s10" id="allocated-list">
        </div>
      </div>
    </div>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
    N.ValidateSession();
    var texts = N.GetTexts();

    $('#back-caption').append(texts.get(N.TagBack));
    $('#start-label').text(texts.get(N.TagStartAddress));
    $('#end-label').text(texts.get(N.TagEndAddress));
    $('#netmask-label').text(texts.get(N.TagNetmask));
    //
    // $('.modal-footer > a:first-child').text(texts.get(N.TagCancel));
    // $('.modal-footer > a:last-child').text(texts.get(N.TagConfirm));

    M.AutoInit();
    var poolName;
    function parseQueryString(){
      var url = window.location.search;
      var queryParams = new Map();
      var queryString = url.substring( url.indexOf('?') + 1 );
      if (0 === queryString.length){
        return queryParams;
      }
      var values = queryString.split("&");
      values.forEach((value) => {
        var p = value.split('=');
        queryParams.set(p[0], p[1]);
      });
      return queryParams;
    }

    function loadAddressRange(poolName, rangeType, startAddress){
      $.getJSON("/address_pools/" + poolName + '/' + rangeType + '/ranges/' + startAddress , function(result){
        if (0 != result['error_code']) {
            M.toast({html: 'get address range fail:' + result['message']});
            return;
        }
        var range = result['data'];
        var endAddress = range['end'];
        var netmask = range['netmask'];
        if (!endAddress){
          M.toast({html: 'no end address available'});
          return;
        }
        if (!netmask){
          M.toast({html: 'no netmask available'});
          return;
        }

        $('#range-start').text(startAddress);
        $('#range-end').text(endAddress);
        $('#range-netmask').text(netmask);

        var allocated = range['allocated'];
        if (allocated && allocated.length > 0){
          var container = $('<tbody>');
          allocated.forEach((pair) =>{
              container.append(
                $('<tr>').append(
                  $('<td>').text(pair['address'])
                ).append(
                  $('<td>').append(
                    $('<a>').attr('href', 'instance_detail.html?pool=' + poolName + '&instance=' + pair['instance']).attr('target', '_blank').text(pair['instance'])
                  )
                )
              );
          });

          $('#allocated-list').empty().append(
            $('<table>').append(
              $('<thead>').append(
                $('<tr>').append(
                  $('<th>').text(texts.get(N.TagAllocated))
                ).append(
                  $('<th>').text(texts.get(N.TagInstance))
                )
              )
            ).append(
              container
            )
          );
        }
      });
    }

    $(function(){
      var params = parseQueryString();
      if (!params.has('pool')){
        M.toast({html: 'must specify pool name'})
        return;
      }
      if (!params.has('type')){
        M.toast({html: 'must specify range type'})
        return;
      }
      if (!params.has('start')){
        M.toast({html: 'must specify start address'})
        return;
      }
      poolName = params.get('pool');
      loadAddressRange(poolName, params.get('type'), params.get('start'));
    });

</script>
</body>
</html>
